<template>
  <view class="container">

    <view class="containertitle">
      <textarea class="container_text" confirm-type="done" v-model="feedbackvalue" maxlength="200"
        placeholder="请填写您的反馈意见">
        <text>输入字符不超过200字</text>
      </textarea>
    </view>

    <view class="new_pet">
      <button type="success" class="new_pet_button" @click="Updatefeedback">提交反馈</button>
    </view>
  </view>
</template>

<script>
  import {
    Userfeedback
  } from '@/api/user.js'
  export default {
    data() {
      return {
        feedbackvalue: ''
      };
    },
    methods: {
      Updatefeedback() {

        const feedback = {
          idea: this.feedbackvalue
        }
        Userfeedback(feedback).then(res => {
          // console.log(res)
          uni.showToast({
            title: '已成功提交反馈！',
            icon: 'none'
          })

          this.feedbackvalue = ''
        }).catch(err => err)
      }
    }
  }
</script>

<style lang="scss">
  .containertitle {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .container_text {
      position: relative;
      width: 100%;
      height: 500rpx;
      box-sizing: border-box;
      padding: 20rpx;
      border: 1px solid rgba(61, 61, 61, 0.3);
      color: rgba(61, 61, 61, 0.7);
      font-size: 28rpx;

      text {
        position: absolute;
        bottom: 20rpx;
        right: 30rpx;
        font-size: 24rpx;
        color: rgba(61, 61, 61, 0.3);
      }
    }
  }

  .new_pet {
    position: fixed;
    bottom: 0;
    padding: 24rpx;
    width: 750rpx;
    height: 128rpx;
    box-sizing: border-box;
    background-color: #fff;

    .new_pet_button {
      width: 702rpx;
      height: 82rpx;
      background-color: #FDD338;
      border-radius: 6px;
      color: rgba(61, 61, 61, 0.5);
      line-height: 82rpx;
      border-radius: 82rpx;
    }
  }
</style>
